<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <link rel="stylesheet"
          href="semantic_files/semantic/dist/semantic.min.css">

    <script src="css/jquery-3.1.1.min.js"></script>

    <script src="semantic_files/semantic/dist/semantic.min.js"></script>

    <script src="css/vue.min.js"></script>

    <script src="css/axios.min.js"></script>

</head>
<style type="text/css">
    body {
        background-image: url("images/cats/c4.jpg");
        background-repeat: no-repeat;
    }

    body > .grid {
        height: 100%;
    }

    .image {
        margin-top: -100px;
    }

    .column {
        max-width: 450px;
    }
</style>
<script>

    $(document)
        .ready(function () {
            $('.ui.form')
                .form({
                    fields: {
                        email: {
                            identifier: 'phone',
                            rules: [
                                {
                                    type: 'empty',
                                    prompt: '请输入您的电话号码！'
                                },
                                {
                                    type: 'regExp',
                                    value: /^1[3456789]\d{9}$/,
                                    prompt: '电话号码格式不正确！'
                                }
                            ]
                        },
                        password: {
                            identifier: 'pwd',
                            rules: [
                                {
                                    type: 'empty',
                                    prompt: '请输入您的密码'
                                },
                                {
                                    type: 'length[6]',
                                    prompt: '密码至少需要6位！'
                                }
                            ]
                        }
                    }
                })
            ;
        })
    ;
</script>


</head>
<body>

<div id="app">
    <div class="ui middle aligned center aligned grid">
        <div class="column">
            <img src="images/index/logo.png" class="image" style="height: 200px;width: auto;margin-top: 50px">
            <h2 class="ui teal header">
                <div class="content" style="color: darkorange;">
                    <br/>
                    Hey，好久不见~
                </div>
            </h2>

            <!--<form class="ui large success form" action="lg" method="post">-->
            <!--<form class="ui large form" onsubmit="false" method="get">-->
            <div id="loginform" class="ui large form">
                <div class="ui stacked segment left aligned">
                    <div class="field">
                        <label>手机号：</label>
                        <div class="ui left icon input">
                            <i class="user icon"></i>
                            <input type="text" name="phone" placeholder="电话号码" v-model="phone">
                        </div>
                    </div>

                    <div class="field">
                        <label>密码：</label>
                        <div class="ui left icon input">
                            <i class="lock icon"></i>
                            <input type="password" name="pwd" placeholder="密码" v-model="password">
                        </div>
                    </div>

                    <div class="ui fluid large teal submit button" @click="login" style="background-color: darkorange">
                        登录
                    </div>

                    <div id="errortip" class="ui error message"></div>

                </div>

                <div id="checking" class="ui success message">
                    <div id="checkheader" class="header">登录信息提交成功！</div>
                    <p id="checkmsg">正在为您进行身份验证~</p>
                </div>

                <div id="failure" class="ui message" style="display: none;border: red;color: red">
                    <div id="failureheader" class="header">用户名或密码错误！</div>
                    <p id="failuremsg">请重新输入~</p>
                </div>

                <!--            </form>-->
            </div>
            <div class="ui message">
                还没有账号？ 那赶紧点这里<i class="hand point right outline icon"></i> <a href="register.html">立即注册</a>
            </div>

        </div>
    </div>
</div>
</body>

<!--进行用户信息的验证和页面跳转 本网页用的vue 也可以采用Semantic UI的功能-->
<script>

    var ue = new Vue({
        el: "#app",
        data: {
            phone: null,
            password: null,
        },
        methods: {
            login: function () {
                if ($("#errortip").css("display") == "none"
                    && this.phone != null
                    && this.password != null) {
                    axios.post("lg", {
                        phone: this.phone,
                        pwd: this.password
                    }).then(function (response) {
                        if (response.data.respStatusCode == 200) {
                            //经过一番尝试 还是决定用jQuery封装好的方法 真香
                            //后面可能还得改 因为有登录失败的情况 最好把整个验证信息div换了
                            $("#failure").css("display", "none")
                            $("#checkheader").text("登录成功")
                            $("#checkmsg").text("正在为你跳转~")
                            $("#checking").css("display", "block");
                            window.setTimeout(function () {
                                window.location.href = "index.html"
                            }, 3000)
                        } else if (response.data.respStatusCode == 300) {
                            $("#checking").css("display", "none");
                            $("#failure").css("display", "block")
                        }
                    })
                }
            }
        }
    })
</script>
</html>